<!--
@wyq
可以适配数据大于等于2小于等于8条的数据
-->
<template>
    <div class="grid-card">
        <div class="grid-card-header">{{title}}</div>
        <div class="grid-card-body">
            <el-row class="grid-card-carousel">
                <el-col :span="24" class="grid-card-carousel-box">
                    <div style="position: relative">
                        城市:<span>成都</span>
                        <span style="position: absolute;right: 10px" v-if="name == 'dispatch'">
                            <el-button type="primary" size="mini">账号记录</el-button>
                        </span>
                    </div>
                    <div >
                        账号：<span class="pr10">admin</span>

                        部门：<span class="pr10">运营</span>

                        岗位：<span class="pr10">运营监控</span>

                        姓名：<span class="pr10">{{userInfo.name}} </span>
                        <span class="modify-password" v-if="name == 'dispatch'">
                            修改密码
                            <!--<el-button type="primary" size="mini"></el-button>-->
                        </span>
                        <span  v-if="name == 'default'">
                            <el-button type="primary" size="mini">修改密码</el-button>
                        </span>

                    </div>
                    <div>本次登陆时间:<span class="pl10">{{userInfo.updated_at}}  </span></div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import base from './base.js';
    export default {
        extends: base,
        name: "GridOne",
        props: {},
        data() {
            return {
                datalist: [
                    {
                        title: '当日下单总数',
                        value: '2000'
                    },
                    {
                        title: '当日配送单',
                        value: '2000'
                    },{
                        title: '当日下单总数',
                        value: '2000'
                    },{
                        title: '当日下单总数',
                        value: '2000'
                    },
                    {
                        title: '当日配送单',
                        value: '2000'
                    },{
                        title: '当日下单总数',
                        value: '2000'
                    }
                ],
                userInfo: ''
            }
        },
        mounted() {
            this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
        }
    }
</script>

<style scoped lang="less">
    .grid-card {
        width: 100%;
        min-width: 300px;
        .grid-card-header {
            height: 43px;
            line-height: 43px;
            padding: 0 15px;
            border-bottom: 1px solid #f6f6f6;
            font-size: 16px;
            color: #000;
            border-radius: 2px 2px 0 0;
        }
        .grid-card-body{
            position: relative;
            padding: 10px 15px;
            line-height: 24px;
            .grid-card-carousel-box {
                line-height: 25px;
                .pr10{
                    padding-right: 20px;
                }
                .pl10{
                    padding-left: 20px;
                }
                .pl100{
                    padding-left: 100px;
                }
                .modify-password{
                    color: #009688;
                }
                .modify-password:hover{
                    color: #5FB878;
                    cursor: pointer;
                }
            }
        }
    }
</style>
